<template>
  <div class="container-cc">
    <div class="box-top">
      <img class="touxiang" src="@/assets/images/touxiang.jpg" alt="">
      <div class="name">{{myRealName}}</div>
      <div class="jifen">积分 {{myScore}}</div>
    </div>
    <div class="card">
      <div class="card-item" @click="goto1">
        <van-icon name="manager" size="1.6rem" /><span class="item-text">个人信息</span>
      </div>
      <div class="card-item" @click="goto2">
        <van-icon name="friends" size="1.6rem" /><span class="item-text">我的子女</span>
      </div>
      <div class="card-item" @click="goto3">
        <van-icon name="send-gift" size="1.6rem" /><span class="item-text">播放记录</span>
      </div>
      <div class="card-item" @click="jump({ path: '/SearchPage', query: { status: 'collect' } })">
        <van-icon name="star" size="1.6rem" /><span class="item-text">我的收藏</span>
      </div>
      <div class="card-item" @click="goto4">
        <van-icon name="records" size="1.6rem" /><span class="item-text">我的订单</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { reactive } from 'vue';
import { useRouter } from 'vue-router';
import { onMounted } from 'vue'
import { isFirstLogin } from '@/api/login';
import { showToast } from 'vant';
const router = useRouter()
const myRealName = ref('');
const myScore = ref('');
const openId = localStorage.getItem('openId');
const mobilePhone = ref(JSON.parse(localStorage.getItem('userInfo'))[0].mobilePhone);

const getUserInfo = () => {
    const params = {
      openId: openId,
      mobilePhone: mobilePhone.value,
    }
    isFirstLogin(params).then((res) => {
    if (res.code === 200) {
      if(res.data.length>0){
        const { score, realName } = res.data[0]
        myRealName.value = realName
        myScore.value = score
      }
    } else {
      showToast(res.msg)
    }
  }).catch((err) => {
    console.log(err)
  })
}


//  页面跳转
const jump = (options) => {
  router.push(options);
}



const goto1=()=>{
  router.push('/personalInfo')
}
const goto2=()=>{
  router.push('/childrenInfo')
}
const goto3=()=>{
  router.push({ path: '/SearchPage',query: { status: 'history' } })
}
const goto4=()=>{
  router.push({ path: '/OrderInfo' })
}


onMounted(() => {
  getUserInfo();
})

</script>

<style lang="scss" scoped>
  .container-cc {
    background: #fff;
    box-sizing: border-box;
    height: 100%;
    box-sizing: border-box;
    background-image: url('@/assets/images/bg.jpg');
    background-repeat: no-repeat;
    padding-top: 2rem;
  }
  .box-top{
    text-align: center;
    font-size: 1.6rem;
  }
  .touxiang{
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
  }
  .name{
    margin-bottom: 0.5rem;
  }
  .card{
    width: 94%;
    margin: 0 auto;
    // box-shadow: 0px 0px 0px 6px rgba(248, 248, 248, 0.5) inset;
    border-radius: 4px;
    padding: 1rem;
    box-sizing: border-box;
  }
  .item-text{
    font-size: 1.6rem;
    margin-left: 1rem;
  }
  .card-item{
    padding: 2rem 1rem;
    border-bottom: 1px solid #ede8e8;
  }



</style>